<template>
  <div style="width: 98%;margin: 0 auto">
    <div style="text-align: center;margin-top: 20px">
      <el-form ref="searchForm" :model="searchForm" :rules="rules" size="mini" :inline="true">
        <el-form-item label="年:" prop="year">
          <el-date-picker
            v-model="searchForm.year"
            type="year"
            placeholder="选择年"
            :picker-options="pickerOptions"
            value-format="yyyy"
            format="yyyy年"
            size="mini"
            @change="searchForm.type=null"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label=" 年度:" prop="type">
          <el-select v-model="searchForm.type" placeholder="请选择年度" clearable size="mini">
            <el-option :value="1" label="上半年" :disabled="optionDisabled(1)"></el-option>
            <el-option :value="2" label="下半年" :disabled="optionDisabled(2)"></el-option>
            <el-option :value="3" label="全年" :disabled="optionDisabled(3)"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item v-if="is_manage_page" label="销售员:" prop="user_id">
          <el-select v-model="searchForm.user_id" placeholder="请选择销售员" clearable size="mini">
            <el-option v-for="item in userArr" :value="item.id" :label="item.name" :key="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button style="margin-left: 10px" type="primary" size="mini" plain @click="search">搜索</el-button>
          <el-button v-if="yearData.need_fill && !is_manage_page" style="margin-left: 10px" size="mini" type="text"
                     @click="toFillPage"
          >
            填写目标
          </el-button>
          <el-button style="margin-left: 10px" size="mini" plain @click="exportExcel">导出</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div style="overflow-x: auto" v-loading="tableLoading">
      <table class="mailTable" id="data_table" :style="'margin-top: 10px;width: 100%;min-width: 1450px;max-height:'+tableMaxHeight+'px;'">
        <tr class="firstTr header">
          <td class="firstTd" colspan="24">{{ yearData.year }}年{{
              yearData.type === 1 ? '上年度' : yearData.type === 2 ? '下半年' : '全年'
            }}业绩冲刺目标（{{ yearData.sum ? yearData.sum + '万元' : '暂无' }}）
          </td>
        </tr>
        <tr class="header_two">
          <td class="firstTd" style="width: 5%;min-width: 90px" rowspan="2">{{
              yearData.type === 3 ? '全年' : '半年'
            }}度目标<br/>(万元)
          </td>
          <td style="width: 5%;min-width: 60px" rowspan="2">年度累计完成金额<br/>(万元)</td>
          <td style="width: 5%;min-width: 80px" rowspan="2">年度累计完成率</td>
          <td style="width: 5%;min-width: 180px" colspan="3">月度目标<br/>(万元)</td>
          <td style="width: 5%;min-width: 50px" rowspan="2">月份</td>
          <td style="width: 10%;min-width: 100px" rowspan="2">周期时间</td>
          <td style="width: 5%;min-width: 60px" rowspan="2">本周目标<br/>(万元)</td>
          <td style="width: 5%;min-width: 60px" rowspan="2">目标类别<br/>(万元)</td>
          <td style="width: 5%;min-width: 80px" rowspan="2">分目标<br/>(万元)</td>
          <td style="width: 5%;min-width: 120px" rowspan="2">本周成交金额<br/>(万元)</td>
          <td style="width: 5%;min-width: 120px" rowspan="2">本周完成率</td>
          <td style="width: 5%;min-width: 180px" colspan="3">累计完成金额<br/>(万元)</td>
          <td style="width: 5%;min-width: 180px" colspan="3">月度累计完成率</td>
          <td style="width: 15%;min-width: 200px" rowspan="2">目标客户组成及金额<br/>(万元)</td>
          <td style="width: 15%;min-width: 200px" rowspan="2">本周需要拜访的客户</td>
        </tr>
        <tr>
          <td style="width: 60px">维护</td>
          <td style="width: 60px">个人</td>
          <td style="width: 60px">合计</td>
          <td style="width: 60px">维护</td>
          <td style="width: 60px">个人</td>
          <td style="width: 60px">合计</td>
          <td style="width: 60px">维护</td>
          <td style="width: 60px">个人</td>
          <td style="width: 60px">合计</td>
        </tr>
        <template v-if="yearData.month_target_list && yearData.month_target_list.length"
                  v-for="(month,month_index) in yearData.month_target_list"
        >
          <template v-if="month.week_completion_detail_list && month.week_completion_detail_list.length"
                    v-for="(week,week_index) in month.week_completion_detail_list"
          >
            <template v-if="week.weekCompletionTypeVOList && week.weekCompletionTypeVOList.length"
                      v-for="(week_type,week_type_index) in week.weekCompletionTypeVOList"
            >
              <tr>
                <td v-if="month_index ===0 && week_index ===0 && week_type_index===0"
                    :rowspan="yearData.type === 3 ? 96:48" class="firstTd"
                >
                  {{ yearData.sum }}
                </td>
                <td v-if="month_index ===0 && week_index ===0 && week_type_index===0"
                    :rowspan="yearData.type === 3 ? 96:48"
                >
                  {{ yearData.amount_completed }}
                </td>
                <td v-if="month_index ===0 && week_index ===0 && week_type_index===0"
                    :rowspan="yearData.type === 3 ? 96:48"
                >
                  {{ yearData.completion_rate }}%
                </td>
                <td v-if="week_index ===0 && week_type_index===0" rowspan="8">{{ month.uphold_target }}</td>
                <td v-if="week_index ===0 && week_type_index===0" rowspan="8">{{ month.personal_target }}</td>
                <td v-if="week_index ===0 && week_type_index===0" rowspan="8">{{ month.target }}</td>
                <td v-if="week_index ===0 && week_type_index===0" rowspan="8">{{ month.month }}月</td>
                <td v-if="week_type_index===0" rowspan="2">{{ week.begin_date }}<br>~<br>{{ week.end_date }}</td>
                <td v-if="week_type_index===0" rowspan="2">{{ week.target }}</td>
                <td>{{ week_type.type === 1 ? '维护' : '个人' }}</td>
                <td>{{ week_type.target }}</td>
                <td>{{ week_type.amount_completed }}</td>
                <td>{{ week_type.completion_rate }}</td>
                <td v-if="week_index ===0 && week_type_index===0" rowspan="8">{{ month.uphold_completed }}</td>
                <td v-if="week_index ===0 && week_type_index===0" rowspan="8">{{ month.personal_completed }}</td>
                <td v-if="week_index ===0 && week_type_index===0" rowspan="8">{{ month.amount_completed }}</td>
                <td v-if="week_index ===0 && week_type_index===0" rowspan="8">{{ month.uphold_rate }}%</td>
                <td v-if="week_index ===0 && week_type_index===0" rowspan="8">{{ month.personal_rate }}%</td>
                <td v-if="week_index ===0 && week_type_index===0" rowspan="8">{{ month.completion_rate }}%</td>
                <td>
                  <div v-if="week_type.weekTransactedCustomerVOList && week_type.weekTransactedCustomerVOList.length">
                    <div v-for="customer in week_type.weekTransactedCustomerVOList">
                      {{ customer.name + '(' + (customer.target ? customer.target + '万' : '暂无') + ')' }}
                    </div>
                  </div>
                </td>
                <td>
                  <div v-if="week_type.need_visit_customer_list && week_type.need_visit_customer_list.length">
                    <div v-for="customer in week_type.need_visit_customer_list">
                      {{ customer.name }}
                    </div>
                  </div>
                </td>
              </tr>
            </template>
          </template>
        </template>
        <tr v-if="!yearData.month_target_list ||( yearData.month_target_list&& yearData.month_target_list.length)===0">
          <td class="firstTd" colspan="15">暂无数据</td>
        </tr>
      </table>
    </div>
  </div>
</template>

<script>
import { querySaleYearTargetSummary } from '@/api/workbench/saleYearTarget'
import { list_by_role_code } from '@/api/system/user'
import { formatDateByFmt, generateUUID } from '@/utils/util'
import XLSX from 'xlsx'

export default {
  name: 'half_year_target_show',
  data() {
    return {
      tableMaxHeight: 0,
      searchForm: {
        year: null,
        type: null,
        user_id: null
      },
      userArr: [],
      pickerOptions: {
        disabledDate(time) {
          var date = new Date()
          return time.getFullYear() - date.getFullYear() > 1 || (time.getFullYear() === date.getFullYear() + 1 && date.getMonth() !== 11)
        }
      },
      yearData: {
        year: 0,
        type: 0,
        sum: 0,
        month_target_list: []
      },
      rules: {
        year: [
          { required: true, message: '请选择年', trigger: 'change' }
        ],
        type: [
          { required: true, message: '请选择年度', trigger: 'change' }
        ],
        user_id: [
          { required: true, message: '请选择销售员', trigger: 'change' }
        ]
      },
      tableLoading: false
    }
  },
  created() {
    const now = new Date()
    this.searchForm.year = now.getFullYear() + ''
    this.searchForm.type = ((now.getMonth() + 1) <= 6 ? 1 : 2)
    this.tableMaxHeight = (document.documentElement.clientHeight || document.body.clientHeight) - 210
    if (this.is_manage_page) {
      this.initSaleArr()
    } else {
      this.searchForm.year = now.getFullYear() + ''
      this.searchForm.type = ((now.getMonth() + 1) <= 6 ? 1 : 2)
      this.searchForm.user_id = this.my_user_id
      this.getData()
    }
  },
  computed: {
    my_user_id() {
      return this.$store.state.user.id
    },
    is_manage_page() {
      return this.$route.name === 'half_year_target_manage'
    }
  },
  methods: {
    optionDisabled(type) {
      var date = new Date()
      const year = parseInt(this.searchForm.year)
      if (year === date.getFullYear() + 1 && date.getMonth() === 11) {
        if (type === 2 || type === 3) {
          return true
        } else {
          return false
        }
      } else {
        console.log(2)
        return false
      }
    },
    toFillPage() {
      const uuid = generateUUID()
      const params = {
        year: this.searchForm.year,
        type: this.searchForm.type
      }
      this.$store.commit('keep/PUT_PAGE_PARAMS', {
        uuid: uuid,
        data: params
      })
      this.$router.push({
        name: 'half_year_target',
        query: {
          uuid: uuid
        }
      })
    },
    search() {
      this.$refs.searchForm.validate(flag => {
        if (flag) {
          this.getData()
        }
      })
    },
    getData() {
      this.tableLoading = true
      querySaleYearTargetSummary(this.searchForm).then(res => {
        this.tableLoading = false
        this.yearData = res.data
      })
    },
    initSaleArr() {
      list_by_role_code({ code: 'Salesperson' }).then(res => {
        this.userArr = res.data
      })
    },
    exportExcel() {
      this.$refs.searchForm.validate(flag => {
        if (flag) {
          var find = this.userArr.find(item => this.searchForm.user_id === item.id)
          var table_elt = document.getElementById('data_table')
          var workbook = XLSX.utils.table_to_book(table_elt)
          var ws = workbook.Sheets['Sheet1']
          XLSX.utils.sheet_add_aoa(ws, [])
          XLSX.writeFile(workbook, ((find ? find.name : '') + '半年目标') + (formatDateByFmt(new Date(), 'yyyyMMddhhmmss') + Math.floor(Math.random() * (1000000 - 1) + 1)) + '.xlsx')
        }
      })
    }
  }
}
</script>

<style scoped>
.mailTable {
  width: 90%;
  font-size: 14px;
  margin: 0 auto 10px auto;
  border-collapse: collapse;
}

.mailTable tr td {
  height: 35px;
  line-height: 20px;
  box-sizing: border-box;
  padding: 0 5px;
  border-bottom: 1px solid #E6EAEE;
  border-right: 1px solid #E6EAEE;
  text-align: center;
}

.firstTr td {
  border-top: 1px solid #E6EAEE;
}

.firstTd {
  border-left: 1px solid #E6EAEE;
}

.mailTable tr td.column {
  text-align: center;
  /*border: 1px solid #8c939d;*/
}

.header {
  text-align: center;
  font-size: 18px;
  font-weight: bold;
  margin: 10px auto;
}

.header_two {
  text-align: center;
  font-size: 12px;
  font-weight: bold;
  margin: 10px auto;
}

.required {
  color: red;
}

/deep/ .el-form-item {
  margin-bottom: 0;
}

/deep/ .el-form-item__content {
  line-height: 0;
}
</style>
